<style lang="scss" scoped>
.add_card {
  li {
    height: 0.54rem;
    line-height: 0.54rem;
    div {
      width: 0.8rem;
    }
    .get_code {
      div {
        width: 80%;
        height: 45%;
        border: 1px solid #e12825;
      }
    }
  }
  footer {
    padding-top: 0.66rem;
  }
}
.border-l:after {
  content: " ";
  position: absolute;
  left: -1px;
  top: 20%;
  width: 1px;
  height: 60%;
  border-left: 1px solid #e12825;
  color: #e12825;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
</style>

<template>
  <div class="add_card">
    <ul class="margin-t10 bgfff">
      <li class="flex-col padding-lr15 border-b flex-col">
        <div>卡号</div>
        <input type="text" class="box1" v-model="cardInfo.cardNumber" @blur="getCardName" onkeyup="this.value =this.value.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');" placeholder="请输入银行卡账号">
      </li>
      <li class="flex-col padding-lr15 flex-col">
        <div>卡类型</div>
        <input type="text" class="box1 bgfff" v-model="cardInfo.cardType" disabled placeholder="银行卡类型">
      </li>
    </ul>
    <ul class="margin-t10 bgfff">
      <li class="flex-col padding-lr15 border-b flex-col">
        <div>姓名</div>
        <input type="text" class="box1" v-model="cardInfo.cardMaster" placeholder="持卡人姓名">
      </li>
      <li class="flex-col padding-lr15 flex-col border-b">
        <div>证件类型</div>
        <select class="box1" v-model="cardInfo.papersType" disabled>
          <option value="">请选择</option>
          <option :value="0" selected>身份证</option>
          <option :value="1">驾驶证</option>
        </select>
      </li>
      <li class="flex-col padding-lr15 border-b flex-col">
        <div>证件号</div>
        <input type="number" class="box1" v-model="cardInfo.papersNumber" placeholder="请输入证件号">
      </li>
      <li class="flex-col padding-lr15 border-b flex-col">
        <div>手机号码</div>
        <input type="number" class="box1" v-model="cardInfo.phone" placeholder="银行手机预留号码">
        <!-- <div class="box-center border-l get_code padding-l10">
          <div class="box-center cred bor-r">获取</div>
        </div> -->
      </li>
    </ul>
    <footer class="box-center footer font-14 box-center">
      <div class="cfff box-center" @click="handleCard">下一步</div>
    </footer>
  </div>
</template>


<script>
export default {
  name: "add_card",
  data() {
    return {
      cardInfo: {
        cardNumber: "",
        cardType: "",
        cardMaster: "",
        papersType: 0,
        papersNumber: "",
        phone: "",
        bankcardCode: ""
      }
    };
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      if (parseInt(that.$route.params.id)) {
        that.cardInfo = that.getCache("cardInfo");
      }
    });
  },
  methods: {
    /**
     * 添加或修改银行卡信息
     */
    handleCard() {
      let that = this,
        ops = this.cardInfo,
        has = parseInt(that.$route.params.id);
      if (!ops.cardNumber) {
        this.layer("请输入银行卡号");
        return;
      }
      if (!ops.cardType) {
        this.layer("请输入正确的银行卡号");
        return;
      }
      if (!ops.cardMaster) {
        this.layer("请输入您的姓名");
        return;
      }
      if (ops.papersType !== 0) {
        this.layer("请选择证件类型");
        return;
      }
      if (!this.hasUserCode(ops.papersNumber)) {
        this.layer("请输入正确证件号码");
        return;
      }
      if (!this.hasMobile(ops.phone)) {
        this.layer("请选择正确手机号码");
        return;
      }

      if (has) {
        ops["bankcardCode"] = ops.bankcardCode;
      } else {
        delete ops["bankcardCode"];
      }

      ops["cardNumber"] = that.removeAllSpace(ops.cardNumber); // 去除空格

      this.http.post("userbankcard/save", ops).then(res => {
        if (has) {
          that.layer("修改成功", "m");
        } else {
          that.layer("添加成功", "m");
        }
        that.back();
      });
    },
    // 根据银行卡卡号，查询银行卡名字
    getCardName() {
      let that = this;
      this.http
        .get("user/getBankName", {
          bankNumber: that.removeAllSpace(that.cardInfo.cardNumber)
        })
        .then(res => {
          if (res.code === 0) {
            that.cardInfo.cardType = res.msg;
          }
        });
    }
  }
};
</script>

